html, body { width: 100%; height: 100%; }
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
* { box-sizing: border-box; }
#app { width: 800px; height: 450px; position: fixed; top: 50%; left: 50%; margin: -225px 0 0 -400px; }
#app:before { content: "诛仙手游炼器模拟器（仅供娱乐）"; display: block; position: absolute; top: 0px; left: 0; right: 0; z-index: 10; text-align: center; color: #F44336; font-weight: bold; font-size: 24px; text-shadow: 1px 1px 1px #000; }
.start-btn:active, .zdlq-show-btn:active, .zdlq-cancel:active, .zdlq-confirm:active { background: rgba(0, 0, 0, .3); }
.hook { width: 27px; height: 21px; position: absolute; z-index: 2; }
.hook.active { background: url(../img/hook.png); background-size: 100% 100%; }
.gray-img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
.zb-list-container { width: 206px; height: 284px; position: absolute; z-index: 2; top: 122px; left: 90px; overflow: hidden; }
ul.zb-list { width: 236px; height: 100%; margin: 0; padding: 2px; list-style: none; overflow-y: scroll; }
ul.zb-list>li>img { width: 54px; position: absolute; top: 4px; left: 4px; }
ul.zb-list>li { width: 200px; height: 66px; padding: 0 0 0 60px; position: relative; margin: 2px 0px; border: 2px solid #aaa; background: #d6dbd6; }
ul.zb-list>li.active { background: #b5cfde; }
p.p1 { font-size: 14px; line-height: 30px; color: #6b6b6b; font-weight: 600; }
p.p2 { font-size: 13px; line-height: 20px; color: #e5e5e5; font-weight: 600; text-shadow: 1px 1px #7b7979; }
p.p2[lqdj="3"], p.p2[lqdj="4"] { color: #c0e77a; }
p.p2[lqdj="5"], p.p2[lqdj="6"] { color: #42ff42; }
p.p2[lqdj="7"], p.p2[lqdj="8"] { color: #6be3e7; }
p.p2[lqdj="9"], p.p2[lqdj="10"] { color: #4261e7; }
p.p2[lqdj="11"], p.p2[lqdj="12"] { color: #e7b6ef; }
p.p2[lqdj="13"], p.p2[lqdj="14"] { color: #ef04ef; }
p.p2[lqdj="15"] { color: #e70852; }
.curr-zb-img { width: 54px; height: 54px; position: absolute; left: 496px; top: 114px; z-index: 3; }
.start-btn { width: 72px; height: 72px; position: absolute; z-index: 2; top: 337px; left: 648px; border-radius: 50%; }
.start-btn:active { background: rgba(0, 0, 0, .3); }
.lqcg { width: 300px; height: 300px; margin: -150px 0 0 -150px; position: absolute; top: 50%; left: 50%; z-index: 10; background: url(../img/lqcg.png) no-repeat; background-size: 100% 100%; }
.lqsb { width: 300px; height: 224px; margin: -110px 0 0 -140px; position: absolute; top: 50%; left: 50%; z-index: 10; background: url(../img/lqsb.png) no-repeat; background-size: 100% 100%; }
.zfdj-box { width: 360px; height: 320px; margin: -144px 0 0 -180px; position: absolute; top: 50%; left: 50%; z-index: 3; background: url(../img/zfdj.png) no-repeat; background-size: 100% 100%; }
.zfdj-show-btn { width: 48px; height: 48px; position: absolute; z-index: 2; top: 240px; left: 559px; }
.zfdj-show-btn>strong { display: block; width: 100%; position: absolute; bottom: 0px; color: #4abf13; text-align: center; text-shadow: 1px 0px 1px #000; }
.zfdj-confirm-btn { width: 96px; height: 34px; position: absolute; z-index: 2; right: 24px; bottom: 24px; }
ul.zfdj-list { width: 320px; height: 138px; position: absolute; top: 40px; left: 20px; }
ul.zfdj-list>li { display: inline-block; width: 60px; height: 60px; border: 2px solid transparent; margin: 2px; position: relative; }
ul.zfdj-list>li>img { width: 100%; height: 100%; }
ul.zfdj-list>li>strong { position: absolute; right: 4px; bottom: 0px; color: #4abf13; text-shadow: 1px 0px 1px #000; }
ul.zfdj-list>li.active { border-color: #ffe78b; }
ul.zfdj-list>li.active:before { content: ""; display: block; position: absolute; top: 50%; left: 0px; margin-top: -10px; border-left: 10px solid #ffe78b; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
ul.zfdj-list>li.active:after { content: ""; display: block; position: absolute; top: 50%; right: 0px; margin-top: -10px; border-right: 10px solid #ffe78b; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.zfdj-desc { position: absolute; top: 183px; left: 24px; right: 24px; bottom: 68px; padding: 6px 10px; }
.zfdj-desc>h3 { color: #4a8abd; }
.zfdj-desc>p { color: #944118; }
.hook.zfdj-hook { top: 264px; right: 80px; }
.lqfnum { display: inline-block; position: absolute; z-index: 2; top: 270px; left: 335px; width: 51px; color: #4abf13; text-align: center; text-shadow: 1px 0px 1px #000; }
.zdlq-box { width: 520px; height: 376px; margin: -174px 0 0 -260px; position: absolute; top: 50%; left: 50%; z-index: 3; background: url(../img/zdlq.png) no-repeat; background-size: 100% 100%; }
.zdlq-show-btn { width: 105px; height: 35px; position: absolute; top: 376px; left: 319px; z-index: 2; font-size: 18px; text-align: center; line-height: 35px; }
.zdlq-cancel { width: 105px; height: 34px; position: absolute; bottom: 14px; left: 17px; }
.zdlq-confirm { width: 105px; height: 34px; position: absolute; bottom: 14px; right: 17px; }
ul.zdlq-zfdj-list { width: 450px; height: 74px; position: absolute; top: 208px; left: 34px; border: 1px solid; }
ul.zdlq-zfdj-list>li { display: inline-block; width: 48px; height: 48px; border: 2px solid transparent; margin: 8px 10px 2px 10px; position: relative; }
ul.zdlq-zfdj-list>li>img { width: 100%; height: 100%; }
ul.zdlq-zfdj-list>li>strong { position: absolute; right: 4px; bottom: 0px; color: #4abf13; text-shadow: 1px 0px 1px #000; }
ul.zdlq-zfdj-list>li>p { position: absolute; left: -30px; right: -30px; text-align: center; white-space: nowrap; font-weight: bold; }
ul.zdlq-zfdj-list>li.active { border-color: #ffe78b; }
ul.zdlq-zfdj-list>li.active:before { content: ""; display: block; position: absolute; top: 50%; left: 0px; margin-top: -10px; z-index: 2; border-left: 10px solid #ffe78b; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
ul.zdlq-zfdj-list>li.active:after { content: ""; display: block; position: absolute; top: 50%; right: 0px; margin-top: -10px; z-index: 2; border-right: 10px solid #ffe78b; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.hook.zdlq-first-hook { left: 26px; top: 100px; }
.hook.zdlq-second-hook { left: 26px; top: 137px; }
.hook.zdlq-three-hook { left: 26px; top: 173px; }
.zdlq-uplimit-select { width: 54px; height: 26px; position: absolute; top: 37px; left: 342px; }
.zdlq-uplimit-select>span { display: inline-block; width: 100%; text-align: center; line-height: 26px; font-size: 16px; }
.zdlq-uplimit-select>select { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: transparent; z-index: 2; color: transparent; border: none; }
.zdlq-uplimit-select>select>option { color: #000; }
p.total { position: absolute; bottom: 0; text-align: right; width: 100%; padding: 0 20px; color: #FF5722; text-shadow: 1px 1px 1px #000; }